<template>
    <div class="switch" @click="onClick">
        <div :class="'btn ' + (value ? 'on' : 'off')"></div>
    </div>
</template>

<script>
export default {
    props: {
        value: Boolean,
    },
    // v2.x
    // model: {
    //     prop: 'value',
    //     event: 'onChange'
    // },

    emits: ['update:value'],
    // onChange事件
    methods: {
        onClick () {
            this.$emit('update:value', !this.value);
        },
    },
}
</script>

<style>
.switch {
    height: 100px;
    width: 200px;
    border-radius: 100px;
    background: red;
    position: relative;
}
.btn {
    height: 90px;
    width: 90px;
    border-radius: 45px;
    background: white;
    position: absolute;
    top: 5px;
    transition: 200ms ease;
}
.btn.on {
    left: 105px;
}
.btn.off {
    left: 5px;
}
</style>